<template>
  <div class="config_box">
    <div class="top_config">
      <div class="config_item">
        <div class="is_title">院校意向</div>
        <div class="is_add">
          <div class="item_left">就读地域</div>
          <div class="item_right">
            <div
              v-for="item in provideList"
              :key="item.province_id"
              @click="provideListClick(item)"
              class="right_btn_item"
            >
              <span
                :class="
                  queryParams.provide.includes(item.province_id) ? 'active' : ''
                "
              >
                {{ item.name }}
              </span>
            </div>
          </div>
        </div>
        <div class="is_add">
          <div class="item_left">院校类型</div>
          <div class="item_right">
            <div
              v-for="item in schoolList"
              :key="item.type"
              @click="schoolListClick(item)"
              class="right_btn_item"
            >
              <span
                :class="queryParams.school.includes(item.type) ? 'active' : ''"
              >
                {{ item.type_name }}
              </span>
            </div>
          </div>
        </div>
        <div class="is_add">
          <div class="item_left">院校层次</div>
          <div class="item_right">
            <div
              v-for="item in levelList"
              :key="item.id"
              @click="levelListClick(item)"
              class="right_btn_item"
            >
              <span
                :class="queryParams.level.includes(item.id) ? 'active' : ''"
              >
                {{ item.label }}
              </span>
            </div>
          </div>
        </div>
        <div class="is_add">
          <div class="item_left">院校性质</div>
          <div class="item_right">
            <div
              v-for="item in natureList"
              :key="item.id"
              @click="natureListClick(item)"
              class="right_btn_item"
            >
              <span
                :class="queryParams.nature.includes(item.id) ? 'active' : ''"
              >
                {{ item.label }}
              </span>
            </div>
          </div>
        </div>
      </div>
      <div class="midLine"></div>
      <div class="is_box">
        <div class="is_box_top">
          <div class="isBtn" @click="handleSearchIf">
            根据以上条件，生成志愿表
          </div>
          <div class="isBtn is_btn2" @click="handleSearchIf">
            系统主动推荐，生成志愿表
          </div>
        </div>
      </div>
    </div>
    <VIP ref="addVIPRef"></VIP>
    <addLogin ref="addLoginRef"></addLogin>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { EventBus } from "@/utils/eventBus";
import {
  province,
  schoolType,
  getRecommendSchoolsVoluntarty,
} from "@/api/index";
export default {
  name: "",
  computed: {
    ...mapState({
      device: (state) => state.app.device,
    }),
  },
  data() {
    return {
      provideList: [],
      schoolList: [],
      levelList: [
        { label: "985", id: "985" },
        { label: "211", id: "211" },
        { label: "双一流", id: "双一流" },
        { label: "教育部直属", id: "教育部直属" },
        { label: "中央部委", id: "中央部委" },
        { label: "双高计划", id: "双高计划" },
        { label: "强基计划", id: "强基计划" },
      ],
      natureList: [
        { label: "公办", id: "公办" },
        { label: "民办", id: "民办" },
        { label: "中外合作办学", id: "中外合作办学" },
        { label: "内地与港澳台地区合作办学", id: "内地与港澳台地区合作办学" },
      ],
      queryParams: {
        provide: [],
        school: [],
        nature: [],
        level: [],
        year: [],
        double_high: "",
        max_score: "",
        min_score: "",
        school_name: "",
        page: 1,
        pageSize: 10,
      },
      list: [],
    };
  },
  created() {
    this.getdict();
  },
  methods: {
    getdict() {
      province().then((response) => {
        this.provideList = response.data;
      });
      schoolType().then((response) => {
        this.schoolList = response.data;
      });
    },
    getList() {
      chatAi().then((response) => {
        this.list = response.data;
      });
    },
    handleSearch() {
      var queryParams = {};
      queryParams.page = this.queryParams.page;
      queryParams.pageSize = this.queryParams.pageSize;
      queryParams.year = "";
      queryParams.province = this.queryParams.provide.join("");
      queryParams.school_name = this.queryParams.school_name;
      queryParams.school_type = this.queryParams.school.join("");
      queryParams.school_nature = this.queryParams.nature.join("");
      queryParams.f985 = this.queryParams.level.includes("985") ? 1 : "";
      queryParams.f211 = this.queryParams.level.includes("211") ? 1 : "";
      queryParams.dual_class = this.queryParams.level.includes("双一流")
        ? 1
        : "";
      queryParams.department = this.queryParams.level.includes("教育部直属")
        ? 1
        : "";
      queryParams.central = this.queryParams.level.includes("中央部委")
        ? 1
        : "";
      queryParams.double_high = this.queryParams.level.includes("双高计划")
        ? 1
        : "";
      queryParams.qj = this.queryParams.level.includes("强基计划") ? 1 : "";
      queryParams.min_score = this.queryParams.min_score;
      queryParams.max_score = this.queryParams.max_score;
      this.getRecommendSchoolsVoluntartyHandle(queryParams);
    },
    /*
     * author：Gengbaodada
     * create by date：2025/05/12
     * content：一键填报
     */
    getRecommendSchoolsVoluntartyHandle(data) {
      getRecommendSchoolsVoluntarty(data).then((res) => {
        console.log("res", res);
        if (res.code == 1) {
          EventBus.$emit("resultData");
          EventBus.$emit("indexFixedBox", "/mine");
        }
      });
    },
    handleSearchIf() {
      if (!localStorage.getItem("userInfo")) {
        this.$refs.addLoginRef.handleOpen();
        return;
      }
      if (
        localStorage.getItem("userInfo") &&
        JSON.parse(localStorage.getItem("userInfo")).is_vip != 2
      ) {
        this.$refs.addVIPRef.handleOpen();
        return;
      }
      this.handleSearch();
    },
    //志愿表
    sumbit() {},
    levelListClick(row) {
      this.queryParams.level = this.toggleValueInArray(
        this.queryParams.level,
        row.id
      );
    },
    natureListClick(row) {
      this.queryParams.nature = this.toggleValueInArray(
        this.queryParams.nature,
        row.id
      );
    },
    schoolListClick(row) {
      this.queryParams.school = this.toggleValueInArray(
        this.queryParams.school,
        row.type
      );
    },
    //地域
    provideListClick(row) {
      this.queryParams.provide = this.toggleValueInArray(
        this.queryParams.provide,
        row.province_id
      );
    },
  },
};
</script>

<style scoped lang="scss">
.config_box {
  width: 100%;
  border-radius: 8px;
  background-color: #fff;
}

.config_box .top_config,
.config_box .top_selected {
  padding: 16px 14px;
}

.config_box .top_config .config_item .is_title,
.config_box .top_selected .config_item .is_title {
  color: #222224;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.56px;
  margin-bottom: 12px;
}

.config_box .top_config .config_item .is_add,
.config_box .top_selected .config_item .is_add {
  display: flex;
  justify-content: flex-start;
}

.config_box .top_config .config_item .item_left,
.config_box .top_selected .config_item .item_left {
  width: 58px;
  color: #9ca1a6;
  margin-right: 12px;
  margin-bottom: 15px;
}

.config_box .top_config .config_item .item_right,
.config_box .top_selected .config_item .item_right {
  flex: 1;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.config_box .top_config .config_item .item_right .is_text,
.config_box .top_selected .config_item .item_right .is_text {
  color: #606166;
  font-size: 14px;
  letter-spacing: 0.56px;
}

.config_box .top_config .config_item .item_right .is_text span,
.config_box .top_selected .config_item .item_right .is_text span {
  color: #0478f1;
}

.config_box .top_config .config_item .item_right .right_btn_item,
.config_box .top_selected .config_item .item_right .right_btn_item {
  color: #606166;
  margin-right: 16px;
  margin-bottom: 16px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.config_box .top_config .config_item .item_right .right_btn_item span,
.config_box .top_selected .config_item .item_right .right_btn_item span {
  padding: 2px 8px;
}

.config_box .top_config .config_item .item_right .right_btn_item .active,
.config_box .top_selected .config_item .item_right .right_btn_item .active {
  background-color: rgba(255, 89, 47, 0.1);
  color: #0478f1;
}

.config_box .midLine,
.config_box .top_selected {
  width: 100%;
  border-top: 2px solid #eff0f0;
}

.config_box .is_box {
  margin-top: 5px;
}

.config_box .is_box .is_box_top {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.config_box .is_box .is_box_top .isBtn {
  width: 250px;
  height: 44px;
  border-radius: 8px;
  background: #3c363d;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 12px;
  color: #ffe5a2;
  font-size: 16px;
  cursor: pointer;
  font-weight: 600;
}

.config_box .is_box .is_box_top .is_btn2 {
  background-color: #0478f1;
  color: #fff;
  margin-left: 20px;
}

.config_box .is_box .is_box_top .top_item {
  width: 80px;
  height: 32px;
  background: #fff;
  color: #222224;
  margin-right: 18px;
  border-radius: 4px;
  line-height: 32px;
  text-align: center;
  cursor: pointer;
}

.config_box .is_box .is_box_top .active {
  background-color: #ff6a44;
  color: #fff;
}

.config_box .is_box .is_box_bottom {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 12px;
}

.config_box .is_box .is_box_bottom .bottom_item {
  height: 28px;
  margin-right: 18px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  line-height: 28px;
  background-color: #f9fafa;
}

.config_box .is_box .is_box_bottom .bottom_item input[type="text"] {
  width: 75px;
  height: 28px;
  border: none;
  outline: none;
  background-color: #f9fafa;
  padding-left: 5px;
}

.config_box .is_box .is_box_bottom .bottom_item div:first-child {
  width: 45px;
  height: 28px;
  border-right: 1px solid #ccc;
}
</style>
